<template>
    <div>
        <el-image-viewer v-if="showImagePreview" :url-list="imgList" hide-on-click-modal
            @close="showImagePreview = false">
            <template #toolbar="{ actions, reset, activeIndex }">
                <el-icon @click="actions('zoomOut')">
                    <ZoomOut />
                </el-icon>
                <el-icon @click="actions('zoomIn', { enableTransition: false, zoomRate: 2 })">
                    <ZoomIn />
                </el-icon>
                <el-icon @click="
                    actions('clockwise', { rotateDeg: 180, enableTransition: false })
                    ">
                    <RefreshRight />
                </el-icon>
                <el-icon @click="actions('anticlockwise')">
                    <RefreshLeft />
                </el-icon>
                <el-icon @click="reset">
                    <Refresh />
                </el-icon>
                <el-icon @click="download(activeIndex)">
                    <Download />
                </el-icon>
            </template>
        </el-image-viewer>
        <el-dialog v-model="showFilePreview" fullscreen :title="title" width="90%" append-to-body
            modal-class="file-preview-dialog">
            <div class="iframe-container">
                <iframe :src="file" allowfullscreen="true" border="0" frameborder="no" framespacing="0"
                    scrolling="no"></iframe>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
// 获取文件扩展名
const getFileExtension = urlStr => {
    let fileExtension = '';
    if (urlStr.lastIndexOf('.') > -1) {
        fileExtension = urlStr.slice(urlStr.lastIndexOf('.') + 1);
        fileExtension = fileExtension.toLowerCase();
    }
    return fileExtension;
};
const showImagePreview = ref(false)
const showFilePreview = ref(false)
const imgList = ref([])
const title = ref('')
const file = ref('')
const download = (index) => {
    const url = imgList.value[index]
    const suffix = url.slice(url.lastIndexOf('.'))
    const filename = Date.now() + suffix
    fetch(url)
        .then((response) => response.blob())
        .then((blob) => {
            const blobUrl = URL.createObjectURL(new Blob([blob]))
            const link = document.createElement('a')
            link.href = blobUrl
            link.download = filename
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(blobUrl)
            link.remove()
        })
}
const open = (file, name) => {
    if (!file) return
    let fileExtension = getFileExtension(name || file);
    let imageSuffix = ['png', 'jpg', 'jpeg'];
    let fileSuffix = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'blob'];
    if (imageSuffix.includes(fileExtension)) {
        imgList.value = [file]
        showImagePreview.value = true
    } else if (fileSuffix.includes(fileExtension)) {
        file.value = file
        showFilePreview.value = true
    }
}
defineExpose({ open });
</script>
<style lang="scss">
.file-preview-dialog {
    .el-dialog {
        background-color: transparent;
    }

    .el-dialog__header {
        border-bottom: none;
    }
    .iframe-container {
        width: 80%;
        margin: 0 auto;
    }

    .el-dialog__headerbtn {
        right: 10px;
        align-items: center;
        border-radius: 50%;
        box-sizing: border-box;
        cursor: pointer;
        display: flex;
        justify-content: center;
        opacity: .8;
        position: absolute;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        z-index: 1;
        background-color: #606266;
        border-color: #fff;
        color: #fff;
        font-size: 24px;
        height: 44px;
        width: 44px;
    }
}
</style>
